<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
</head>
<body>
    <div id="app">
        <el-form :inline="true" :model="userVo" class="demo-form-inline">
            <el-form-item label="姓名:">
                <el-input v-model="userVo.username" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="userVo.status" placeholder="状态">
                    <el-option label="启用" value="0"></el-option>
                    <el-option label="禁用" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchUser">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="userList"
                border
                style="width: 100%">
            <el-table-column
                    prop="headUrl"
                    label="头像"
                    width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.headUrl" width="180" height="50"/>
                </template>
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="nickName"
                    label="昵称">
            </el-table-column>
            <el-table-column
                    prop="isDeleted"
                    label="状态">
               <template slot-scope="scope">
                   <el-switch
                           style="display: block"
                           v-model="scope.row.isDeleted"
                           active-color="#13ce66"
                           inactive-color="#ff4949"
                           :active-value="0"
                           :inactive-value="1"
                           active-text="启用"
                           inactive-text="禁用"
                           @change="changeStatus(scope.row.id,scope.row.isDeleted)"
                   >
                   </el-switch>
               </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="fenRole(scope.row.id)">分配角色</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[2,3,5,10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--分配角色-->
        <el-dialog
                title="分配角色"
                :visible.sync="dialogVisible"
                width="30%"
                >
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.roleName}}</el-checkbox>
            </el-checkbox-group>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmFen">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</body>
   <script>
        var app=new Vue({
             el:"#app",
             data:{
                 //是否权限
                 checkAll: false,
                 //被选中的复选框
                 checkedCities: [],
                 //所有的复选框
                 cities: [],
                 isIndeterminate: true,
                 //接受所有用户信息
                 userList:[],
                 //条件对象
                 userVo:{},
                 current:1,
                 pageSize:3,
                 total:0,
                 dialogVisible:false,
                 //被分配角色的用户id
                 userId:undefined,
             },
             created(){
                 this.initUserTable();
             },
             methods:{
                 handleCheckAllChange(val) {
                     this.checkedCities = val ? this.cities.map(item=>item.id) : [];
                     this.isIndeterminate = false;
                 },
                 handleCheckedCitiesChange(value) {
                     let checkedCount = value.length;
                     this.checkAll = checkedCount === this.cities.length;
                     this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
                 },
                 ////////////////////////////////////////

                 confirmFen(){
                     //被选中的角色id  当前用户的id
                     axios.get("/system/user-role/confirm?userId="+this.userId+"&roleIds="+this.checkedCities).then(result=>{
                         this.dialogVisible=false;
                         this.$message.success("分配成功");
                     })
                 },

                 fenRole(userId){
                     this.userId=userId;
                      //1.显示弹出层
                     this.dialogVisible=true;
                     axios.get("/system/role/fenRole?userId="+userId).then(result=>{
                            this.cities=result.data.data.list;
                            this.checkedCities=result.data.data.roleIds;
                     })

                 },

                 changeStatus(id,status){
                     // alert("id========="+id+";status======"+status)
                     //调用后台接口
                 },

                 handleSizeChange(val) {
                     this.pageSize=val;
                     this.initUserTable();
                 },
                 handleCurrentChange(val) {
                     this.current=val;
                     this.initUserTable();
                 },
                 searchUser(){
                    this.current=1;
                    this.initUserTable();
                 },
                 initUserTable(){
                     axios.post("/system/user/list?current="+this.current+"&pageSize="+this.pageSize,this.userVo).then(result=>{
                          this.userList=result.data.data.records;
                          this.total=result.data.data.total;
                     })
                 }
             }
        })
   </script>
</html>